<template>
  <div class="app-container">
    <!-- 添加 -->
    <el-form :inline="true">
      <el-form-item style="float:right">
        <el-button
          type="primary"
          plain
          class="el-icon-plus"
          @click="showMask"
        >添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <div class="tableWrap">
      <el-table :data="tableData" border style="width: 100%">
        <!-- id -->
        <el-table-column prop="sort" label="排序" align="center" />
        <!-- 名称 -->
        <el-table-column prop="adName" label="小程序名称" align="center" />
        <!-- 图片 -->
        <el-table-column label="小程序图片" align="center">
          <template slot-scope="scope">
            <div>
              <img :src="common.img_url+scope.row.adPicture" alt class="smallBG">
            </div>
          </template>
        </el-table-column>
        <!-- 跳转链接-->
        <el-table-column prop="adName" label="跳转链接" align="center" />
        <!-- 操作 -->
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="editGen(scope.row)">编辑</el-button>
            <el-button type="text" size="mini" @click="deleteGen(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <!-- 添加的页面 -->
    <add-generalize
      v-if="showAddMask"
      :is-hidden="showAddMask"
      :detail-info="detailInfo"
      :is-disabled="isDisabled"
      @checkMask="checkMask"
      @refresh="addOrUpdate"
    />
    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        background
        :page-sizes="[10,20,50,100]"
        :page-size="pageSize"
        :pager-count="11"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>

  </div>
</template>
<script>
  import addGeneralize from './add_generalize'
  export default {
    components: {
      addGeneralize
    },
    data(){
      return{
        tableData: [], // 列表数据
        showAddMask: false, // 是否显示添加弹窗
        detailInfo: {}, // 详细信息-修改
        page: 1,
        pageSize: 10,
        total: 0,
      }
    },
    // 生命周期钩子，初始时获取数据
    mounted() {
    },
    methods:{
      // 添加
      showMask() {
        this.detailInfo = {} // 详细信息初始为空
        this.showAddMask = true // 显示添加弹窗
      },
      // 删除
      deleteAdv(id) {
        this.$confirm('确认删除该推广数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // deleteAd({
          //   id: id
          // }).then((result) => {
          //   const res = result.data
          //   if (res.code === 0) {
          //     this.$message({
          //       type: 'success',
          //       message: '删除成功!'
          //     })
          //     this.getFreshLists({
          //       adName: this.search_form.adName ? this.search_form.adName : null,
          //       status: parseInt(this.search_form.status) === 0 ? 0 : parseInt(this.search_form.status),
          //       provinceId: null,
          //       pageSize: this.pageSize,
          //       pageNum: this.page,
          //       positionType: this.type
          //     })
          //   } else {
          //     this.$message.error(res.msg)
          //   }
          // }).catch((err) => {
          //   this.$message.error('服务器网络错误，请稍后重试')
          // })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 编辑
      editAdv(row) {
        this.detailInfo = row // 赋值
        this.isDisabled = false // 能否编辑
        this.showAddMask = true // 显示添加弹窗
      },
      //取消
      checkMask(isHidden) {
        this.detailInfo = {}
        this.showAddMask = isHidden
      },
      //添加或更新后
      addOrUpdate() {
      },
      // 当前页面改变
      handleCurrentChange(val) {
        this.getFreshLists({
          adName: this.search_form.adName ? this.search_form.adName : null,
          status: parseInt(this.search_form.status) === 0 ? 0 : parseInt(this.search_form.status),
          provinceId: this.search_form.provinceId[0],
          pageSize: this.pageSize,
          pageNum: val,
          positionType: this.type
        })
      },

      // 页数改变
      handleSizeChange(page) {
        this.getFreshLists({
          adName: this.search_form.adName ? this.search_form.adName : null,
          status: parseInt(this.search_form.status) === 0 ? 0 : parseInt(this.search_form.status),
          provinceId: this.search_form.provinceId[0],
          'pageSize': page,
          'pageNum': this.page,
          positionType: this.type
        })
      }

    }
  }

</script>
<style scoped>
  .tableWrap {
    margin-top: 20px;
  }
  .block {
    background: #fff;
    padding: 32px 16px;
  }
</style>
